<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GLSL Shader Editor</title>

		<!-- CodeMirror -->
		<link type='text/css' rel='stylesheet' href="src/codemirror/css/codemirror.css">
		<link type='text/css' rel="stylesheet" href="src/codemirror/addon/fold/foldgutter.css">	
		<link type='text/css' rel="stylesheet" href="src/codemirror/addon/dialog/dialog.css">
		<link type='text/css' rel="stylesheet" href="src/codemirror/addon/hint/show-hint.css">
		<link type='text/css' rel="stylesheet" href="src/codemirror/theme/monokai.css">

		<script type="text/javascript" src="src/codemirror.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/search/searchcursor.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/search/search.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/dialog/dialog.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/edit/matchbrackets.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/edit/closebrackets.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/comment/comment.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/wrap/hardwrap.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/fold/foldcode.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/fold/brace-fold.js"></script>
		<script type="text/javascript" src="src/codemirror/keymap/sublime.js"></script>
		<script type="text/javascript" src="src/codemirror/addon/hint/show-hint.js"></script>
		<script type="text/javascript" src="src/codemirror/mode/webGL-clike.js"></script>

		<!-- GLSL Canvas -->
		<script type="text/javascript" src="src/glslCanvas.js"></script>

		<style>
			body {
	  			background: #272822;
			}

			h1 {
				color: white;
				font-family: Courier, Arial;
			}

			pre {
				font-size: 130%;
			}

			canvas.right {
				position: fixed;
				right: 10px;
				top: 10px;
				background-color: #fff;
				border-radius: 15px;
				overflow: hidden;
    -webkit-mask-image: url();
			}

			.CodeMirror {
				font-size: 110%;
				line-height: 1.3; 
    			right: 10px;
    			height: 100%;
			}

  		.CodeMirror-linenumbers { 
  			padding: 0 8px; 
  		}
		</style>

	</head>
	<body>
		<h1 id="title" >FILE NAME.frag</h1>
		<div id="editor"></div>
		<canvas id="canvas" class="right" width="500" height="500" animate="true"></canvas>
		<script type="text/javascript">
		window.addEventListener("hashchange", function () {
			loadTag()
		}, false);

		var imgs = [];

		function removeElementsByClass(className){
		    var elements = document.getElementsByClassName(className);
		    while(elements.length > 0){
		        elements[0].parentNode.removeChild(elements[0]);
		    }
		}

		function loadTag(){
			var fragShader = "";
			var fragFile = "";

			while(imgs.length > 0) {
		    	imgs.pop();
			}

			removeElementsByClass("CodeMirror");

			if( window.location.hash === "" ){
				fragShader = "void main(){\n\
			gl_FragColor = vec4(0.0,1.0,0.0,1.0);\n\
		}";
			} else {
				var hashes = location.hash.split('&');

				for(i in hashes){
					var ext = hashes[i].substr(hashes[i].lastIndexOf('.') + 1);
					var name = hashes[i];

					// Extract hash if is present
					if(name.search("#") === 0){
						name = name.substr(1);
					}

					if(ext == "frag"){
						fragFile = name;
						fragShader = fetchHTTP(fragFile);
					} else if (ext == "png" || ext == "jpg" || ext == "PNG" || ext == "JPG" ){
						imgs.push(hashes[i]);
					}
				}
			}

			var demoTitle = document.getElementById("title");
			if(demoTitle){
				demoTitle.innerText = fragFile;
			} 

			var demoCanvas = document.getElementById("canvas");
			if(demoCanvas && fragShader !== ""){
				demoCanvas.setAttribute("data-fragment", fragShader);
				console.log("data-fragment: " + fragFile);

				if(imgs.length > 0){
					var textureList = "";
					for(i in imgs){
						textureList += imgs[i];
						textureList += (i < imgs.length-1)?",":"";
					}
					demoCanvas.setAttribute("data-textures",textureList);
					console.log("data-textures: " + textureList);
				}
				loadShaders();
			}

			var demoEditor = document.getElementById("editor");
			if(demoEditor){
				var editor = CodeMirror(demoEditor,{
					value: fragShader,
					lineNumbers: true,
					matchBrackets: true,
					mode: "x-shader/x-fragment",
					keyMap: "sublime",
					autoCloseBrackets: true,
					extraKeys: {"Ctrl-Space": "autocomplete"},
					showCursorWhenSelecting: true,
					theme: "monokai",
					indentUnit: 4
				});

				editor.on("change", function() {
					demoCanvas.setAttribute("data-fragment", editor.getValue());
					loadShaders();
				});
			}
		}

		window.onload = function () { 
			loadTag();
			renderShaders(); 
		};
		</script>
	</body>
</html>